<?xml version="1.0"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css" type="text/css"?>
<!-- prettier-ignore -->
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
<!-- prettier-ignore -->
<!DOCTYPE html>
<html
  id="__addonRef__-syncManager"
  lang="en"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:html="http://www.w3.org/1999/xhtml"
  windowtype="__addonRef__-syncManager"
  sizemode="normal"
  scrolling="false"
  persist="screenX screenY width height sizemode"
>
  <head>
    <title data-l10n-id="title"></title>
    <meta charset="utf-8" />
    <xul:linkset>
      <link rel="localization" href="browser/menubar.ftl" />
      <link rel="localization" href="browser/browserSets.ftl" />
      <link rel="localization" href="toolkit/global/textActions.ftl" />
      <link rel="localization" href="zotero.ftl" />
      <link rel="localization" href="__addonRef__-syncManager.ftl" />
    </xul:linkset>
    <xul:commandset id="mainCommandSet">
      <xul:command id="cmd_close" oncommand="window.close();" />
    </xul:commandset>
    <xul:keyset id="mainKeyset">
      <xul:key
        id="key_close"
        data-l10n-id="close-shortcut"
        command="cmd_close"
        modifiers="accel"
        reserved="true"
      />
    </xul:keyset>
    <script>
      document.addEventListener("DOMContentLoaded", (ev) => {
        Services.scriptloader.loadSubScript(
          "chrome://zotero/content/include.js",
          this,
        );
        window.arguments[0]._initPromise.resolve();
      });
    </script>
    <style>
      html,
      body {
        min-width: 800px;
        min-height: 400px;
      }
      html,
      body,
      .viewport {
        padding: 0;
        margin: 0;
        height: 100%;
        overflow: hidden;
        word-wrap: break-word;
        user-select: none;
      }
      .viewport {
        margin: 0 5px 0 5px;
        overflow-y: auto;
      }
      .viewport-container {
        padding: 0;
        margin: 0;
        height: calc(100% - 50px);
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        background: var(--material-background);
      }
      .list-viewport {
        width: 100%;
        overflow: hidden;
      }
      #table-container {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
      #manager-table {
        height: 100%;
      }
    </style>
  </head>
  <body class="zotero-window">
    <div class="viewport-container">
      <div id="list-container" class="viewport list-viewport">
        <div id="table-container"></div>
      </div>
    </div>
    <div
      class="footer-container"
      style="justify-content: flex-start; padding: 10px; gap: 8px"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    >
      <button id="refresh" data-l10n-id="refresh"></button>
      <button id="sync" data-l10n-id="sync"></button>
      <button id="unSync" data-l10n-id="unSync"></button>
      <button id="detect" data-l10n-id="detect"></button>
    </div>
  </body>
</html>
